<template>
	<view class="add_report">
		<view class="df_add_head">
			<text class="head_tit">住户信息</text>
			<view class="head_con">
				<view class="head_item">
					<text>户主</text>
					<text>{{nickName}}</text>
				</view>
				<view class="head_item">
					<text>住户</text>
					<text>{{roomInfo}}</text>
				</view>
			</view>
		</view>
		
		<view class="df_add_info">
			<view class="into_top">
				<text class="info_tit">报修内容</text>
				<view class="info_tag">
					<text   
						v-for="(v,i) in repairTypeList" 
						:key="i" 
						:class="['tag_item',repairTypeIndex == i? 'curr_tag_item':'']"
						@click="changeTag(i)"  
						>{{v}}</text> 
				</view>
			</view>
			
			<view class="info_con">
				<text class="in_co_tit">情况描述</text>
				<textarea class="in_co_text" placeholder="请输入报修内容" v-model="content"/>
				<view class="upload_img">
					<u-upload ref="uUpload" :header="headers" :custom-btn="true" :max-size="5 * 1024 * 1024" max-count="3" height="130" width="130" style="position: relative;" :action="action" :file-list="fileList">
						 
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon style="position: absolute; top:50%;left: 50%; transform: translate(-50%,-50%);" name="plus" color="#909399" size="60" ></u-icon> 
						</view>  
					</u-upload>  
				</view>
			</view>
			
		</view>
		
		<view class="df_add_form">
			<view class="form_one">
				<text>联系人</text>
				<input class="form_one_in" type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="form_one">
				<text>联系电话</text>
				<input class="form_one_in" type="text" v-model="mobile" placeholder="请输入联系电话" />
			</view>
		</view>
		
		<view class="sub_add_report" @click="subAddReport">
			提交报修
		</view>
		
	</view>
</template>

<script>
	import {getStorages} from '@/utils/storage'
	export default {
		data() {
			return { 
				// 住户信息
				roomInfo:'',
				// 户主
				nickName: '',
				// 报修类型高亮
				repairTypeIndex: 0,
				// 报修类型
				repairTypeList:[
					'公共报修','物业报修','其他' 
				],
				// 报修类型
				type: 1,
				// 图片上传地址
				action: 'https://community.chuangxiangdianli.com/api/Mini/circle/uploadImg', 
			    fileList:[],
				// 请求头
				headers: {
					"Authorization": ''
				},
				// 图片列表
				images: [],
				// 内容
				content: '',
				// 手机号码
				mobile: '',
				// 姓名
				name: '',
				// 返回上一页时间
				goToPropertyTime: null
			};
		},
		onShow() { 
			if(getStorages('userInfo')){
				this.roomInfo = getStorages('userInfo').userInfo.roomInfo 
				this.nickName = getStorages('userInfo').nickName
				this.headers.Authorization = 'Bearer' + ' ' + getStorages('userInfo').token
			}
		},
		onUnload() { 
			clearTimeout(this.goToPropertyTime)
		},
		methods:{
			changeTag(index){ 
				this.repairTypeIndex = index
				this.type = index+1
			},
			// 提交报修
			subAddReport(){
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})   
				this.filterImgs(files) 
				
				let data = {
					type:this.type,
					content: this.content,
					img: this.images,
					name: this.nickName,
					mobile: this.mobile 
				}
				this.$http.post({
					url: 'Mini/Estate/repairs',
					data
				}).then(res => {
					if(res.code == 200){ 
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						clearTimeout(this.goToPropertyTime)
						this.goToPropertyTime = setTimeout(() => {
							uni.redirectTo({
								url: '/property/proReport/index'
							})
						},1000)
					} else{
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none'
						// })
					}
				})
			},
			// 过滤图片路径
			filterImgs(arr){
				let newImgs = []
				arr.map((val,i) => {
					newImgs.push(this.$baseImgUrl + val.response.data.path) 
				})
				this.images = Array.from(new Set(newImgs)) 
			}
		}
	}
</script>

<style lang="scss">
.add_report{
	height: 100vh;
	background-color: #f7f8f9;
	.df_add_head{
		padding: 0 30rpx; 
		font-size: 28rpx;
		background-color: #fff;
		.head_tit{
			display: block;
			height: 98rpx;
			line-height: 98rpx;
			font-weight: 700;
			border-bottom: 2rpx solid #f5f5f5;
		}
		.head_con{
			display: flex;
			flex-direction: column;
			height: 203rpx;
			.head_item{
				flex: 1;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
				& text:nth-child(2){
					font-weight: 700;
				}
			}
		}
		 
	}

	.df_add_info{
		padding: 0 36rpx;
		margin: 14rpx 0 23rpx 0;
		// height: 706rpx;
		background-color: #fff;
		.into_top{
			padding: 40rpx 0;
			border-bottom: 2rpx solid #f5f5f5;
			.info_tit{
				height: 60rpx;
				font-weight: 700;
			}
			.info_tag{
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				.tag_item{ 
					margin: 0 30rpx 20rpx 0;
					padding: 0 38rpx;
					height: 76rpx;
					line-height: 76rpx; 
					font-size: 28rpx;
					color: #5D5D5D;
					background-color: #f5f5f5;
					border-radius: 36rpx;
				}
				.curr_tag_item{
					background-color: #34b0ff;
					color: #fff;
				}
			}
		}
		.info_con{ 
			padding-bottom: 20rpx;
			.in_co_tit{
				height: 82rpx;
				line-height: 82rpx;
				font-weight: 700;
			}
			.in_co_text{
				padding: 33rpx 39rpx;
				height: 221rpx;
				background-color: #f5f5f5;
				border-radius: 10rpx;
				color: #BFBFBF;
			}
			.upload_img{
				margin-top: 20rpx;
				height: 120rpx;
				.slot-btn{
					position: relative;
					width: 120rpx;
					height: 120rpx;
					border: 2rpx dashed #5C5C5C;
					border-radius: 5rpx;
				}
				.up_img_num{
					position: absolute;
				}
			}
		}
	}
	
	.df_add_form{
		padding: 0 36rpx;
		height: 366rpx;
		background-color: #fff;
		.form_one{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 160rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.form_one_in{
				height: 80rpx;
			}
		}
	}

	.sub_add_report{
		margin: 44rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background-color: #34b0ff;
		border-radius: 46rpx;
	}
}
</style>
